<template>
  <div class="tit"  :class="{hide:hideUserBar}">
    <span class="photoImg"><img :src="photo" /></span>
    <b>{{userName}}</b>
    <span class="gistAdd">
      <router-link to="/gists/addGist">
        <el-button size="mini" round @click="onGreet">添加 Gist</el-button>
      </router-link>
    </span>
    <span class="quit"><a @click="userExit">退出</a></span>
  </div>
</template>

<script>
  import client from "./../../js/github-client"
  import http from "axios"
  import bus from "./../../bus"

  export default {
    name: "UserBar",
    data(){
      return {
        userName:"",
        photo:"",
        hideUserBar:true
      }
    },
    mounted(){
      bus.$on("gotAccessToken", this.loadUser);
      bus.$on("removeToken",()=>{
        this.hideUserBar = true;
      });
    },
    methods:{
      onGreet(){
        bus.$emit("showGistDetails");
      },
      userExit(){
        this.hideUserBar = true;
        this.$router.push({path:"/"});
        bus.$emit("removeToken");
      },
      loadUser() {
        client.get("/user")
          .then((r)=>{
            this.hideUserBar = false;
            this.userName = r.data.login;
            this.photo = r.data.avatar_url;
          })
          .catch();
      }
    }
  }
</script>

<style scoped>
  .gistAdd{
    font-size:12px;
  }
  .tit {
    width:100%;
    height: 40px;
    line-height: 40px;
    background-color: #ffffff;
    text-align: left;
    position:fixed;
    top:0;
    left:0;
    z-index: 1000;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  }
  .tit span.quit{
    float: right;
    margin-right: 20px;
  }
  .tit span{
    display: inline-block;
    padding: 0 10px;
  }
  .photoImg img{
    width:30px;
    height: 30px;
    position: relative;
    top:-2px;
    border-radius:50px;
  }
  .tit span,
  .photoImg img{
    vertical-align: middle;
  }
</style>
